<template>
  <div v-popover:portal class="portal" @click="clickHandle">
    <fks-popover
      v-if="portals.length > 1 && multiPortal"
      ref="portal"
      v-model="visible"
      trigger="hover"
      :close-delay="500"
      placement="bottom-start"
      :visible-arrow="false"
      popper-class="toolbar-portal-popover"
    >
      <div v-for="item in portalList" :key="item.id" class="portal-select">
        <div class="portal-select-type">
          {{ item[$lang] }}
        </div>
        <div class="portal-select-options">
          <div
            v-for="type in item.list"
            :key="type.id"
            :class="[
              'portal-select-options-item',
              {
                'portal-select-options-item-active': portalName == type.name,
              },
            ]"
            class="portal-select-options-item"
            @click="changePortal(type)"
          >
            <fks-icon class="portal-icon" icon-class="portal" />
            <span class="text">{{ type.name }}</span>
          </div>
        </div>
        <div />
      </div>
      <template slot="reference">
        <slot :portal="portalName">
          <div class="portal-name">
            <fks-icon
              :class="[
                'svg-portal',
                {
                  'svg-portal-color':
                    topMenu == 1 || (topMenu == 2 && menus.length == 0),
                },
              ]"
              icon-class="portal"
            />
            <span class="portal-title">
              {{ portalName }}
            </span>
          </div>
          <div>
            <i
              v-if="portals.length > 1 && multiPortal"
              class="fks-icon-arrow-down"
              :class="visible ? 'rotate180' : ''"
              :style="{ color: theme }"
            />
          </div>
        </slot>
      </template>
    </fks-popover>
  </div>
</template>
<script>
import { CHANGE_PORTAL, UPDATE_USER } from "@/store/Action/actionTypes";
import { ENUM, PORTALS, PORTAL } from "@/store/State/stateTypes";
import * as types from "@/store/Getter/getterTypes.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      visible: false,
      dialogVisible: false,
      data: {},
      value: "",
      status: "",
      isActive: true,
    };
  },
  computed: {
    menus() {
      /**模式三
       * 查询当前页根节点，判断根节点下是否有子路由，无则全屏展示，有则显示侧边栏
       */

      if (this.topMenu == 2) {
        let activeRoute = this.$store.state.routes.find((route) => {
          const matched = this.$route.matched;
          if (matched && matched[0] && route.meta) {
            return matched[0].meta.menuId == route.meta.menuId;
          }
        });
        if (activeRoute && activeRoute.children) {
          const showingChildren = activeRoute.children.filter((item) => {
            if (item.meta?.config?.includes("invisible")) {
              return false;
            } else {
              return true;
            }
          });
          if (showingChildren.length > 0) {
            return activeRoute.children;
          }
          return [];
        }
      }
      return [];
    },
    ...mapGetters([types.TOP_MENU]),
    theme() {
      return this.$store.getters[types.THEME];
    },
    portalName() {
      return this.$store.state[PORTAL].name;
    },
    portals() {
      return this.$store.state[PORTALS];
    },
    portalTypes() {
      return this.$store.state[ENUM].portalType || [];
    },
    multiPortal() {
      return this.$store.getters[types.MULTI_PORTAL];
    },
    portalList() {
      let portalList = [];
      this.portalTypes.forEach((e) => {
        let arr = this.portals.filter((p) => {
          return p.type == e.code;
        });
        if (arr && arr.length) {
          let portal = Object.assign({ list: arr }, e);
          portalList.push(portal);
        }
      });
      return portalList;
    },
  },
  methods: {
    clickHandle() {
      this.$refs.portal.showPopper
        ? this.$refs.portal.doClose()
        : this.$refs.portal.doShow();
    },
    async changePortal(portal) {
      this.$store.dispatch(CHANGE_PORTAL, portal);
      this.$store.dispatch(UPDATE_USER, portal.id);
      this.$router.replace({ path: "/distribute" });
      this.$storage.set("changePortal", 1);
      this.$refs.portal && this.$refs.portal.doClose();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" >
@import "@/assets/css/variables.scss";

.rotate180 {
  transform: rotate(180deg);
}
.toolbar-portal-popover {
  min-width: 200px;
  min-height: 122px;
  max-height: 400px;
  padding: 12px 16px !important;
  margin-top: 13px !important;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow-y: overlay;
  word-break: keep-all;
  background: #fff;
  &::-webkit-scrollbar {
    display: none;
  }
}
.portal-select {
  position: relative;
  min-width: 160px;
  &:not(:last-of-type)::after {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 0;
    right: -16px;
    display: block;
    height: 1px;
    background: #e4e7ed;
  }
  &:not(:last-of-type) {
    padding-bottom: 24px;
  }
  &-title {
    padding: 0 0 8px;
    border-bottom: 1px solid #f2f3f4;
    font-weight: bold;
    text-align: center;
    color: #393e45;
  }
  &-type {
    height: 36px;
    font-weight: 400;
    font-size: 12px;
    line-height: 36px;
    vertical-align: middle;
    color: #b5b9be;
    cursor: default;
  }
  &-options {
    &-item {
      display: flex;
      align-items: center;
      height: 36px;
      line-height: 36px;
      text-align: left;
      color: #191919;
      cursor: pointer;
      &:hover {
        background-color: mix(#ffffff, $theme, 95%);
      }
      &-active {
        border-radius: 4px;
        background-color: mix(#ffffff, $theme, 90%) !important ;
      }
    }
  }
}
.portal-name {
  display: flex;
  align-items: center;
}
.portal {
  display: inline-block;
  justify-content: space-between;
  text-align: center;
  vertical-align: middle;
  color: black;
  &:hover {
    cursor: pointer;
  }

  > span {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 12px;
  }
}

::v-deep .fks-icon-arrow-down {
  margin-left: 8px;
  line-height: 36px;
  vertical-align: middle;
  transition: transform 0.3s;
}

.portal-list-item {
  cursor: pointer;
}

.portal-list-item + .portal-list-item {
  margin-top: 8px;
}
.text {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-icon {
  width: 24px;
  height: 24px;
  margin: 0 8px 0 4px;
  color: var(--theme-color);
}
.svg-portal {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: var(--theme-color);
  &-color {
    color: #fff;
  }
}
</style>
